<template>
  <view class="assistant-container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-button" @click="goBack">
        <image class="back-icon" src="/static/back.png"></image>
      </view>
      <text class="page-title">职观小助手</text>
      <view class="header-right"></view>
    </view>

    <!-- 主要内容 -->
    <view class="content-wrapper">
      <!-- 合并的区域 -->
      <view class="merged-section">
        <view class="merged-card">
          <!-- 二维码部分 -->
          <view class="qr-section">
            <text class="qr-title">扫描二维码添加小助手</text>
            <view class="qr-placeholder">
              <image class="qr-code" src="/static/wechat.jpg" mode="aspectFit" />
              <text class="qr-note">请使用微信扫描上方二维码</text>
            </view>
          </view>

          <!-- 分隔线 -->
          <view class="divider"></view>

          <!-- 温馨提示部分 -->
          <view class="tips-section">
            <text class="tips-title">温馨提示</text>
            <view class="tips-list">
              <text class="tip-item">• 添加小助手后，将为您提供个性化服务</text>
              <text class="tip-item">• 如有任何问题，随时咨询小助手</text>
              <text class="tip-item">• 保护个人隐私，信息安全有保障</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0
    }
  },
  onLoad() {
    const sys = uni.getSystemInfoSync();
    this.statusBarHeight = sys.statusBarHeight || 0;
  },
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style scoped>
.assistant-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  position: relative;
}

/* 顶部导航 */
.header {
  position: relative; /* 为返回按钮提供定位上下文 */
  background: transparent;
  padding: 110rpx 36rpx 40rpx; /* 增加头部内边距，给标题更多空间 */
  color: #333333;
  display: flex;
  justify-content: center; /* 标题居中 */
  align-items: center;
}

.back-button {
  position: absolute;
  top: 98rpx; /* 与header新的padding-top对齐 */
  left: 36rpx; /* 与header的padding-left对齐 */
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 1rpx solid rgba(16, 185, 129, 0.2);
}

.back-button:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.3);
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: brightness(0);
}

.back-icon:active {
  opacity: 1;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
  text-align: center;
  flex: 1;
}

.header-right {
  width: 64rpx;
}

/* 内容区域 */
.content-wrapper {
  padding: 32rpx 24rpx 40rpx;
  min-height: calc(100vh - 160rpx);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 合并的区域 */
.merged-section {
  margin-bottom: 40rpx;
  width: 100%;
  max-width: 650rpx;
}

.merged-card {
  background: white;
  border-radius: 32rpx;
  padding: 60rpx 50rpx;
  box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.15);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.qr-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 35rpx;
  display: block;
  text-align: center;
  line-height: 1.4;
}

.qr-section {
  margin-bottom: 20rpx;
}

.qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-code {
  width: 420rpx;
  height: 420rpx;
  border-radius: 20rpx;
  margin-bottom: 32rpx;
  border: 3rpx solid rgba(16, 185, 129, 0.25);
  background: white;
  padding: 20rpx;
}

.qr-note {
  font-size: 26rpx;
  color: #64748b;
  text-align: center;
  line-height: 1.5;
}

/* 分隔线 */
.divider {
  width: 100%;
  height: 2rpx;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.3), transparent);
  margin: 40rpx 0;
}

/* 温馨提示 */
.tips-section {
  width: 100%;
}

.tips-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 20rpx;
  display: block;
  text-align: center;
}

.tips-list {
  background: rgba(16, 185, 129, 0.05);
  border-radius: 20rpx;
  padding: 40rpx 32rpx;
  border: 2rpx solid rgba(16, 185, 129, 0.1);
}

.tip-item {
  font-size: 24rpx;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 12rpx;
  display: block;
  font-weight: 500;
}

.tip-item:last-child {
  margin-bottom: 0;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .header {
    padding: 50rpx 24rpx 35rpx;
  }

  .back-button {
    width: 88rpx;
    height: 88rpx;
    top: 50rpx;
    left: 24rpx;
  }

  .page-title {
    font-size: 32rpx;
  }

  .content-wrapper {
    padding: 24rpx 20rpx 32rpx;
    min-height: calc(100vh - 140rpx);
  }

  .merged-section {
    max-width: 550rpx;
  }

  .merged-card {
    padding: 48rpx 40rpx;
    border-radius: 28rpx;
  }

  .qr-section {
    margin-bottom: 16rpx;
  }

  .qr-code {
    width: 320rpx;
    height: 320rpx;
  }

  .qr-title {
    font-size: 28rpx;
    margin-bottom: 28rpx;
    font-weight: 700;
    color: #1f2937;
  }

  .qr-note {
    font-size: 22rpx;
  }

  .divider {
    margin: 32rpx 0;
    height: 1rpx;
  }

  .tips-title {
    font-size: 24rpx;
    margin-bottom: 16rpx;
  }

  .tips-list {
    padding: 32rpx 24rpx;
    border-radius: 16rpx;
  }

  .tip-item {
    font-size: 22rpx;
    margin-bottom: 10rpx;
  }
}
</style>
